<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线段</title>
</head>
<body>
    <canvas id="canvas">

    </canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    context.save();
    drawGird(context,'lightgray',10,10);
context.restore();
    context.lineWidth=1;
    context.beginPath();
    context.moveTo(10,10);
    context.lineTo(100,10);
    context.stroke();
    context.beginPath();
    context.moveTo(10.5,30.5);
    context.lineTo(100.5,30.5);
    context.stroke();

    function drawGird(context, color, stepX, stepY) {
        context.strokeStyle = color;
        context.lineWidth = 0.5;

        for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
            context.beginPath();
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
            context.stroke();
        }

        for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }
    }
</script>
</html>